<template>
  <div ref="chinaRef"></div>
</template>

<script lang="ts" setup>
import { init, registerMap, type ECharts } from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'
import Debounced from '@/compoase/debounce'
import chinaData from '@/data/china_full.json'
import type { IMap } from '@/types/map'
const props = defineProps<{
  options: IMap[];
}>()
const debounce = new Debounced()
const chinaRef = ref()
let myChart: ECharts | null = null
const initEchart = () => {
  if (myChart === null) {
    myChart = init(chinaRef.value)
    // 注册地图
    registerMap('china', chinaData as any)
  }
  // 正常的站点
  const normal = props.options.filter((item) => item.type === 'error')
  // 异常的站点
  const error = props.options.filter((item) => item.type === 'normal')
  const tooltip = {
    show: true,
    trigger: 'item',
    borderWidth: 0,
    padding: [0, 0, 0, 0],
    // enterable: true,
    // hideDelay: 0,
    position: 'top',
    textStyle: {
      fontSize: 14
    },
    formatter: (params: any) => {
      // console.log('params:', params)
      const { name } = params
      // if(seriesType === 'effectScatter')
      return `<div class="tooltip">
          <div class="tooltip-title">${name}</div>
          <div class="fn14 mt8">耗电量：&nbsp;&nbsp;&nbsp;--</div>
          <div class="fn14">储电量：&nbsp;&nbsp;&nbsp;--</div>
          <div class="fn14">发电量：&nbsp;&nbsp;&nbsp;--</div>
        </div>`
      // else return '<div class="tooltip flex-center-middle"><div class="fn28">暂无数据</div></div>' //return false
    }
  }
  const options = {
    legend: {
      data: ['正常', '告警'],
      top: '90%',
      left: '7%',
      align: 'left',
      itemGap: 50,
      textStyle: {
        color: '#fff',
        fontSize: 18
      }
    },
    tooltip,
    // 地理坐标
    geo: {
      tooltip,
      type: 'map',
      map: 'china',
      roam: true, //设置平移，缩放
      zoom: 1.2,
      itemStyle: {
        //地图边界样式
        areaColor: '#003851',
        borderColor: '#29F1FA'
      },
      emphasis: {
        // 高亮状态下的样式
        label: {
          color: '#efefef',
          fontSize: 16
        },
        itemStyle: {
          //地图边界样式
          areaColor: '#29F1FA',
          borderColor: '#003851'
        }
      }
    },
    // 标注地图上的点数据
    series: [
      {
        // 正常
        name: '正常',
        type: 'effectScatter',
        rippleEffect: {
          //涟漪特效
          period: 1, //特效动画时长
          scale: 4, //波纹的最大缩放比例
          brushType: 'stroke' //波纹的绘制方式：stroke | fill
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgb(100, 27, 120)',
          color: 'rgb(6, 235, 164)' //221， 18， 38
        },
        symbolSize: 18,
        data: normal,
        // [
        //   { name: '郑州', value: [113.65, 34.76] }
        // ],
        coordinateSystem: 'geo' // 以当前坐标系定位
      },
      {
        //告警
        name: '告警',
        type: 'effectScatter',
        rippleEffect: {
          //涟漪特效
          period: 1, //特效动画时长
          scale: 4, //波纹的最大缩放比例
          brushType: 'stroke' //波纹的绘制方式：stroke | fill
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgb(255, 18, 78)',
          color: 'rgb(221, 18, 38)' //221， 18， 38
        },
        symbolSize: 18,
        data: error,
        // [
        //   { name: '郑州', value: [113.65, 34.76] }
        // ],
        coordinateSystem: 'geo' // 以当前坐标系定位
      }
    ]
  }
  myChart?.setOption(options)
  // myChart?.on('mouseover', (e) => {
  //   // console.log('e:', e)
  //   options.tooltip.show = false
  //   if (e.seriesType === 'effectScatter') options.tooltip.show = true
  //   else options.tooltip.show = false
  //   myChart?.setOption(options)
  // })
}
onMounted(() => {
  initEchart()
})
const resize = debounce.use(() => {
  myChart?.resize()
})
const listener = () => {
  resize()
}
window.addEventListener('resize', listener, { passive: false })
onUnmounted(() => {
  window.removeEventListener('resize', listener)
})
</script>

<style lang="scss" scoped>
$color: #29f1fa;
:deep(.tooltip) {
  background: url(@imgs/frame_t@2x.png) 0 0 no-repeat;
  background-size: 100% 100%;
  z-index: 2;
  width: max(252px, 20rem);
  height: max(150px, 10.98rem);
  padding: 15px;
  color: #fff;
  div {
    line-height: 2.4rem;
  }
  .tooltip-title {
    font-size: 16px;
    line-height: 3.5rem;
    font-weight: bold;
    color: $color;
  }
}
</style>
